@extends('admin.layouts.head')

@section('content')
    <body>
    <div id="app">
        <div class="wrapper -header-fixed">

        @include('admin.layouts.navbar')
        @include('admin.layouts.sidebar')

        <!-- 内容页开始-->
            <div class="content-container">
                <div class="container-fluid">
                    <div class="page-content">

                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">仪表盘</a></li>
                                <li class="breadcrumb-item active" aria-current="page">投诉建议</li>
                            </ol>
                        </nav>
                        @verbatim
                        <div class="card">
                            <div class="card-body">

                                <div id="vueApp">
                                    <div class="content-box">

                                        <div class="op-bar" style="margin: 16px 0;">

                                        </div>

                                        <el-table
                                            :data="yjjyList"
                                            border
                                            size="mini"
                                            style="width: 100%">
                                            <el-table-column
                                                prop="id"
                                                label="ID"
                                                width="80"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                width="220"
                                                prop="union_id"
                                                label="unionid"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                width="160"
                                                prop="mobile"
                                                label="联系方式"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="content"
                                                label="内容"
                                            >
                                            </el-table-column>

                                            <!--<el-table-column
                                                label="操作"
                                                width="180"
                                            >
                                                <template slot-scope="scope">

                                                </template>
                                            </el-table-column>-->
                                        </el-table>

                                        <el-pagination
                                            style="margin-top: 20px"
                                            background
                                            layout="prev, pager, next"
                                            @current-change="pageChange"
                                            :current-page="curPage"
                                            :page-count="totalPage">
                                        </el-pagination>


                                    </div>

                            </div> <!-- .card-body -->
                        </div> <!-- .card -->
                        @endverbatim
                    </div> <!-- .page-content -->
                </div> <!-- .container-fluid -->
            </div> <!-- .content-container -->
        </div> <!-- .wrapper -->
    </div> <!-- #app -->

    @include('admin.layouts.vuehead')

    <script>
        const vueApp = new Vue({
            el: '#vueApp',
            data() {
                return {
                    yjjyList: [],
                    queryForm: {
                        page: 1,
                    },
                    totalPage: 0,
                    curPage: 0,
                }
            },
            mounted() {
                this.getList()
            },
            watch: {

            },
            methods: {
                getList() {
                    adminApi_yjjyList(this.queryForm).then(res => {
                        this.yjjyList = res.data.data
                        this.totalPage = res.data.last_page
                        this.curPage = res.data.current_page
                    })
                },
                pageChange(p) {
                    this.queryForm.page = p
                    this.getList()
                },
            },
        })
    </script>
    </body>


    <style>

    </style>
@endsection
